<template>
    <div class="main">
        <div class="card">
            <BasicInformation :taskForm="taskForm" @handleSelectionChange="handleSelectionChange"
                @setTaskForm="setTaskForm" :finished="finished" :formConf="formConf" ref="BI" />
        </div>
        <div class="card" v-if="flowRecordList">
            <ApprovalRecords :flowRecordList="flowRecordList" />
        </div>
        <div class="card">
            <FlowChart :xmlData="xmlData" :taskList="taskList" />
        </div>
    </div>
</template>

<script>
import BasicInformation from "./BasicInformation.vue"
import ApprovalRecords from "./ApprovalRecords.vue"
import FlowChart from "./FlowChart.vue"
import { definitionStart, getProcessVariables, readXml, getFlowViewer } from "../api/definition";
import { flowRecord } from "../api/finished";
export default {
    components: {
        BasicInformation,
        ApprovalRecords,
        FlowChart
    },
    data() {
        return {
            xmlData: '',
            taskList: [],
            flowRecordList: [],
            formConf: {},//动态表单数据
            formConfOpen: false,//是否开启动态表单
            userData: [],
            taskForm: {
                returnTaskShow: false, // 是否展示回退表单
                delegateTaskShow: false, // 是否展示回退表单
                defaultTaskShow: true, // 默认处理
                sendUserShow: false, // 审批用户
                multiple: false,
                comment: "", // 意见内容
                procInsId: "", // 流程实例编号
                instanceId: "", // 流程实例编号
                deployId: "",  // 流程定义编号
                taskId: "",// 流程任务编号
                procDefId: "",  // 流程编号
                vars: "",
                targetKey: ""
            },
            variableOpen: false,
            finished: 'false',
        }
    },
    async created() {
        this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
        this.taskForm.taskId = this.$route.query && this.$route.query.taskId;
        this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
        this.taskForm.executionId = this.$route.query && this.$route.query.executionId;
        this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId;
        // 初始化表单
        this.taskForm.procDefId = this.$route.query && this.$route.query.procDefId;
        await this.getFlowViewer(this.taskForm.procInsId, this.taskForm.executionId);
        console.log("2")
        this.getModelDetail(this.taskForm.deployId);
        this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
        this.finished = this.$route.query && this.$route.query.finished
    },
    methods: {
        getModelDetail(deployId) {
            // 发送请求，获取xml
            readXml(deployId).then(res => {
                this.xmlData = res.data
            })
        },
        async getFlowViewer(procInsId, executionId) {
            await getFlowViewer(procInsId, executionId).then(res => {
                this.taskList = res.data
                console.log("1")
            })
        },
        getFlowRecordList(procInsId, deployId) {
            const params = { procInsId: procInsId, deployId: deployId }
            flowRecord(params).then(res => {
                if (res.code == 200) {
                    this.flowRecordList = res.data.flowList;
                    // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
                    if (res.data.formData) {
                        this.formConf = res.data.formData;
                        this.formConfOpen = true
                        this.processVariables(this.taskForm.taskId)
                    }
                } else {
                    this.$message.error(res.msg)
                    this.$router.push({ path: '/' })
                }
            }).catch(res => {
            })
        },
        handleSelectionChange(selection) {
            if (selection) {
                this.userData = selection
                const selectVal = selection.map(item => item.userId);
                if (selectVal instanceof Array) {
                    this.taskForm.values = {
                        "approval": selectVal.join(',')
                    }
                } else {
                    this.taskForm.values = {
                        "approval": selectVal
                    }
                }
            }
            console.log(this.taskForm.values)
        },
        setTaskForm({ key, value }) {
            this.taskForm[key] = value
        },
        /** 获取流程变量内容 */
        processVariables(taskId) {
            if (taskId) {
                // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
                getProcessVariables(taskId).then(res => {
                    // this.variables = res.data.variables;
                    this.$refs.BI.setKFBdata(res.data);
                });
            }
        },
    }
}
</script>

<style lang="less" scoped>
@import "./index.less";

.main {
    width: 1200px;
    margin: auto;

    .card {
        margin-bottom: 20px;

        .ant-card-bordered {
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 #00000025;
        }

    }
}
</style>